<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用v-for时 尽量使用key值</title>
  <script src="../Vue.js"></script>

</head>
<body>
<div id="app">
  <div>
   id: <input v-model="id">
    name: <input v-model="name">
    <button @click="addUser">添加</button>
  </div>
<!--  在2.2+版本中 组件中使用v-for时，必须使用key值，必须使用v-bind绑定-->
<!--  key值 必须是有number获取 string-->
<!--  在一些特殊情况中 如果v-for有问题 必须在使用v-for的同时 使用唯一的 数字/字符串类型 绑定key值-->
  <p v-for="item in list" :key="item.id">
    <input type="checkbox" >
    {{item.id}}    ----------------------------            {{item.name}}</p>
</div>

<script>
  new Vue({
    el : '#app',
    data : {
      id :'',
      name : '',
      list : [
        {id:1,name :'小明'},
        {id:2,name :'小王'},
        {id:3,name :'小李'},
        {id:4,name :'小强'},
        {id:5,name :'小花'}
      ],
    },
    methods :{
      addUser(){//添加方法
        // this.list.push({ id : this.id,name : this.name});

      //  从上向下的添加方法
        this.list.unshift({id : this.id, name : this.name});
      }

    }

  })

</script>
</body>
</html>
